<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #msg {
            width: 400px;
            height: 200px;
            border: solid 1px black;
        }
    </style>
</head>

<body>
    <textarea id="txt1"></textarea>
    <input type="button" id="btn1" value="敏感词过滤">
    <input type="button" id="btn2" value="翻转字符串">
    <input type="button" id="btn3" value="是否是回文字符串">
    <input type="button" id="btn4" value="统计字符出现的次数（控制台）">
    <input type="button" id="btn5" value="是否为空">
    <input type="button" id="btn6" value="是否为数字开头">
    <input type="button" id="btn7" value="长度是否在6到20">
    <div id="msg"></div>
    <script>
        var arr = ["abc", "你好", "哈哈", "hello"];
        var txt1 = document.getElementById("txt1")
        var btn1 = document.getElementById("btn1")
        var msg = document.getElementById("msg")




        // 1.敏感词过滤
        // - 敏感词库自己设定
        var sensitive = ['NND', 'NMD']
        var sentence = '你NND，你玩的什么dx'
        console.log(sentence)
        for (var i = 0; i < sensitive.length; i++) {
            var newsst = ''
            for (var j = 0; j < sentence.length; j++) {
                var sts = sentence[j] + sentence[j + 1] + sentence[j + 2]
                if (sts == sensitive[i]) {
                    var rstc = newsst + '***'
                    var index = j
                }
                newsst += sentence[j]//
                if (j - 2 == index) {
                    newsst = rstc
                    // console.log(newsst)
                }
            }
            sentence = newsst
        }
        console.log(sentence)

        // 2.翻转字符串
        var btn2 = document.getElementById("btn2")
        btn2.onclick = function () {
            var str = txt1.value;
            // 先换成数组，翻转，再转回字符
            str = str.split("").reverse().join("");

            msg.innerHTML = str;
        }




        // 3. 判断字符串是否是回文字符串
        //     - abcdedcba
        //     - abcddcba
        var btn3 = document.getElementById("btn3")
        btn3.onclick = function () {
            var str = txt1.value;
            msg.innerHTML = isH(str);
        }

        // 判断是否是回文字符串的功能
        function isH(str) {
            // 思路1：翻转之后是否和原字符相同

            // 思路2：将第一个和最后一个最比较，依次类推，到中间值
            // 取出中间值
            var c = str.length % 2 ? parseInt(str.length / 2) : str.length / 2;
            // 将中间值之前的部分和之后的部分，一一比较
            for (var i = 0; i < c; i++) {
                // 只要发现不相同，就返回false
                if (str[i] !== str[str.length - 1 - i]) {
                    return false;
                }
            }
            // 比较完成后，还没有返回值false，说明全部相同，返回true
            return true;
        }


        // 4. 根据指定字符串，判断每个字符出现的次数，将结果记录在对象中
        //     - 如：abbcdeee
        //     - 得到：{
        //         a:1,
        //         b:2,
        //         c:1,
        //         d:1,
        //         e:3
        //     }
        var btn4 = document.getElementById("btn4");
        btn4.onclick = function () {
            var str = txt1.value;
            // 准备记录每个字符出现的次数
            var obj = {};
            // 遍历每个字符
            for (var i = 0; i < str.length; i++) {
                // 将遍历出的单个字符，作为对象的属性，判断是否存在
                if (obj[str[i]]) {
                    // 如果对象存在对应的属性，表示不是第一次遇到，给对象的这个属性的值+1
                    obj[str[i]]++;
                } else {
                    // 如果对象不存在对应的属性，表示第一次遇到这个字符，给对象添加这个属性，并设置值为1
                    obj[str[i]] = 1;
                }
            }
            console.log(obj);
        }


        // 5. 检测字符串是否为为空，有提示
        var btn5 = document.getElementById("btn5");
        btn5.onclick = function () {
            var str = txt1.value;
            var tip = "";

            if (str) {
                tip = "不为空"
            } else {
                tip = "空"
            }

            msg.innerHTML = tip;
        }

        // 6. 检测字符串是否以数字开头
        var btn6 = document.getElementById("btn6");
        btn6.onclick = function () {
            var str = txt1.value;
            var tip = "";
            // 根据转数值及NaN的规则判断
            if (!isNaN(str[0]) && str[0] !== " ") {
                tip = "是数字开头";
            } else {
                tip = "不是数字开头";
            }

            msg.innerHTML = tip;
        }


        // 7. 检测字符串长度是否在6~20之间
        var btn7 = document.getElementById("btn7");
        btn7.onclick = function () {
            var str = txt1.value;
            var tip = "";
            if (str.length > 6 && str.length < 20) {
                tip = "长度符合";
            } else {
                tip = "长度不符合";
            }

            msg.innerHTML = tip;
        }
    </script>
</body>

</html>